import React from "react";
import { List } from "antd-mobile";
import { NavBar } from "antd-mobile";
import { useLocation, useNavigate } from "react-router-dom";
import { Modal } from "antd-mobile";
import style from "../../css/secuityCenter/ChangePassword.module.css";
import { useState } from "react";
import { getEdit } from "../../api/index";
import { useEffect } from "react";
export default function BindMobilePhone() {
  const [flag, setFlag] = useState(true);
  const [sj, setSj] = useState(false);
  const navigate = useNavigate();
  const back = () => {
    navigate(-1);
  };
  const handleClick = () => {};
  // 新手机号
  const [hoh, setHoh] = useState("");
  //验证码
  const [hat, setHat] = useState("");
  const [code, setCode] = useState("");
  const [ifcode, setIfCode] = useState(false);
  const [id,setId] = useState('')
  let {state} = useLocation()
  useEffect(()=>{
    setId(state.id)
  },[])
  return (
    <>
      <NavBar onBack={back}>换绑手机</NavBar>
      {flag ? (
        <div className={style.dabox}>
          <List mode="card" header="请输入你需要绑定的新手机号">
            <List.Item extra="中国大陆86" onClick={handleClick}>
              国家和地区
            </List.Item>
          </List>
          <div className={style.Inputbox}>
            <p>新手机号</p>
            <input
              type="text"
              placeholder="请输入新手机号"
              name="sjh"
              value={hoh}
              onChange={(e) => {
                setHoh(e.target.value);
                let reg = new RegExp(/^(?:(?:\+|00)86)?1[3-9]\d{9}$/);
                if (reg.test(e.target.value)) {
                  setSj(true);
                } else {
                  setSj(false);
                }
              }}
            />
          </div>
          {!sj ? (
            <div
              style={{
                width: "95%",
                padding: "2.5%",
                color: "#999",
                backgroundColor: "#F2F3F7",
                fontSize: "14px",
              }}
            >
              要符合手机号格式
            </div>
          ) : (
            ""
          )}
          <button
            className={style.querbtn}
            onClick={() => {
              if (sj) {
                setFlag(false);
              }
            }}
          >
            下一步
          </button>
        </div>
      ) : (
        <div className={style.dabox}>
          <div
            style={{
              width: "95%",
              padding: "2.5%",
              color: "#999",
              backgroundColor: "#F2F3F7",
            }}
          >
            验证码是：{code}
          </div>
          <div className={style.Inputbox}>
            <p>校验码</p>
            <input
              type="text"
              placeholder="短信校验码"
              value={hat}
              name="yzm"
              style={{ borderRight: "1px solid #333" }}
              onChange={(e) => {
                setHat(e.target.value);
                if (code == e.target.value) {
                  setIfCode(true);
                } else {
                  setIfCode(false);
                }
              }}
            />
            <span
              style={{ lineHeight: "40px", paddingLeft: "10px" }}
              onClick={() => {
                var code = "" + (parseInt(Math.random() * 1000000) + 1000000);
                code = code.substring(1, 7);
                setCode(code);
              }}
            >
              获取验证码
            </span>
          </div>
          {!ifcode ? (
            <div
              style={{
                width: "95%",
                padding: "2.5%",
                color: "#999",
                backgroundColor: "#F2F3F7",
              }}
            >
              验证码不正确
            </div>
          ) : (
            ""
          )}
          <button
            className={style.querbtn}
            onClick={() => {
              if (code.length != 0) {
                if (ifcode) {
                  getEdit({id:id,userName:hoh}).then(res=>{
                    if (res.code == 200) {
                      Modal.alert({
                        content: "修改完成",
                        onConfirm: () => {
                          setFlag(true);
                          navigate(-1);
                        },
                      });
                    }
                  })
                }
              }else{
                alert('请获取验证码')
              }
            }}
          >
            下一步
          </button>
        </div>
      )}
    </>
  );
}
